<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<div class="left-sidebar">
    <!-- 用户信息 -->
    <div class="tpl-sidebar-user-panel">
        <div class="tpl-user-panel-slide-toggleable">

           <form id="avatarForm" enctype="multipart/form-data" method="post" target="avatarIframe">
                <div class="am-form-group am-form-file">
                    <div class="tpl-user-panel-profile-picture">
                        <img id="avatarImage" src="/user/showAvatar.do" alt="">
                    </div>

                    <input id="doc-form-file" type="file" name="avatar" onchange="uploadAvatar();">
                </div>
           </form>
            <a href="javascript:;" class="tpl-user-panel-action-link"> <span class="am-icon-pencil"></span> 账号设置</a>
        </div>
    </div>

    <!-- 菜单 -->
    <ul class="sidebar-nav">

        <li class="sidebar-nav-link">
            <a id="userHome" href="/user/toHome.do">
                <i class="am-icon-home sidebar-nav-link-logo"></i> 首页
            </a>
        </li>
        <li class="sidebar-nav-link">
            <a id="flowOpen" href="/card/toOpenAccount.do">
                <i class="am-icon-wpforms sidebar-nav-link-logo"></i> 开户
            </a>
        </li>
        <li class="sidebar-nav-link">
            <a href="draw.html">
                <i class="am-icon-wpforms sidebar-nav-link-logo"></i> 取款
            </a>
        </li>
        <li class="sidebar-nav-link">
            <a href="/card/toDeposit.do" class="active">
                <i class="am-icon-wpforms sidebar-nav-link-logo"></i> 存款

            </a>
        </li>
        <li class="sidebar-nav-link">
            <a href="/card/toTransfer.do">
                <i class="am-icon-wpforms sidebar-nav-link-logo"></i> 转账

            </a>
        </li>

        <li class="sidebar-nav-link">
            <a id="flowMenu" href="/card/toFlow.do">
                <i class="am-icon-bar-chart sidebar-nav-link-logo"></i> 流水
            </a>
        </li>

    </ul>
</div>

<iframe name="avatarIframe" src="https://taobao.com" style="display: none"></iframe>

<script>
    function uploadAvatar() {
        $('#avatarForm').attr('action', '/user/uploadAvatar.do');
        $('#avatarForm').submit();
    }

    function showAvatar(avatarUrl) {
        $('#avatarImage').attr('src', avatarUrl + "?" + new Date().getTime());
    }
</script>